import React,{Component} from 'react'
const MyContext=React.createContext();
const {Provider,Consumer}=MyContext;

function Grand(){
	return (
		<div className="wrapper" style={{backgroundColor:'orange'}}>
			<h4 className='display-4'>
				<Consumer>
					{
						value=>`${value.name}-${value.age}`
					}
				</Consumer>
			</h4>
		</div>
	)
}

class Son extends Component{
	render(){
		return (
			<div className="wrapper" style={{backgroundColor:'green'}}>
				<Grand />
			</div>
		)
	}
}

class Parent extends Component{
	render(){
		return (
			<div className="wrapper" style={{backgroundColor:'red'}}>
				<Son />
			</div>
		)
	}
}


const FuncComponent=()=>{
	return (
		<div className="container">
			<Provider value={{name:'cowen',age:32}}>
				<Parent />
			</Provider>
		</div>
	)
}

export default FuncComponent